
.form-design {
    text-align: left;
}

.form-design .drag-panel .ivu-card-body{
    height:calc(100vh - 318px);
    overflow: auto;
}
.form-design .drag-panel .ivu-collapse-content {
    padding: 0;
}

.form-design .form-label .is-required:before {
    content: "*";
    color: #F56C6C;
    margin-right: 4px;
}

/*.form-design .el-table thead th {*/
/*    background: #a9c8ea;*/
/*    color: #303133;*/
/*    font-size: 13px;*/
/*    padding: 1px;*/
/*}*/

/*.form-design .el-aside {*/
/*    overflow: hidden;*/
/*    padding: 10px;*/
/*}*/

/*.form-design .el-main {*/
/*    padding: 10px;*/
/*}*/

.form-design .ivu-card-header {
    text-align: center;
}

.form-design .ivu-card-body {
    overflow: auto;
    height: 100%;
    padding: 5px;
    width: 100%
}

.form-design .components-list {
    padding: 8px 0;
    width: 100%;
    height: 100%;
}

/*.form-design .components-list .widget-cate {*/
/*    padding: 8px 12px;*/
/*    font-size: 13px;*/
/*}*/

.form-design .components-list ul {
    position: relative;
    overflow: hidden;
    margin: 0;
}

.form-design .components-list .form-edit-widget-label {
    /*font-size: 12px;*/
    /*display: block;*/
    /*width: 45%;*/
    /*line-height: 26px;*/
    /*position: relative;*/
    /*float: left;*/
    /*left: 0;*/
    /*overflow: hidden;*/
    /*text-overflow: ellipsis;*/
    /*white-space: nowrap;*/
    /*margin: 1%;*/
    /*color: #333;*/
    /*border: 1px solid #F4F6FC;*/
    /*text-align: center;*/

    /*font-size: 12px;*/
    color: #2d8cf0;
    display: block;
    width: 30%;
    /*line-height: 26px;*/
    position: relative;
    float: left;
    /*left: 0;*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 10px;
    margin-left: 6px;
    /*margin: 1%;*/
    /*color: #333;*/
    /*border: 1px solid #F4F6FC;*/
    text-align: center;
    cursor: move;
}

.form-design .components-list .form-edit-widget-label:hover {
    /*color: #409EFF;*/
    /*border: 1px dashed #409EFF;*/
    background-color: #2d8cf0;
    color: #fff;
}

/*.form-design .components-list .form-edit-widget-label > a {*/
/*    display: block;*/
/*    cursor: move;*/
/*    background: #F4F6FC;*/
/*    border: 1px solid #F4F6FC;*/
/*}*/

/*.form-design .components-list .form-edit-widget-label > a .icon {*/
/*    margin-right: 6px;*/
/*    margin-left: 8px;*/
/*    font-size: 14px;*/
/*    display: inline-block;*/
/*    vertical-align: middle;*/
/*}*/

/*.form-design .components-list .form-edit-widget-label > a span {*/
/*    display: inline-block;*/
/*    vertical-align: middle;*/
/*}*/

.form-design .components-list .form-edit-widget-label .i {
    /*margin-right: 6px;*/
    /*margin-left: 8px;*/
    /*font-size: 22px;*/
    display: block;
    /*line-height: 22px;*/
    vertical-align: middle;
}

.form-design .components-list .form-edit-widget-label span {
    display: block;
    font-size: 12px;
    line-height: 14px;
    vertical-align: middle;
}


.form-design .form-panel {
    height: 100%;
    background: #eee;
    position: relative;
}
.form-design .form-panel .draggable-box::-webkit-scrollbar {
    width: 4px;
    background-color: #fff;
}

.form-design .form-panel .draggable-box::-webkit-scrollbar-thumb {
    border-radius: 2px;
    -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, .3);
    background-color: #e8eaec;
}

.form-design .form-panel .draggable-box::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, .3);
    border-radius: 2px;
    background-color: #fff;
}
.form-design .form-panel.no-toolbars-top {
    height: calc(100% - 50px);
}

.form-design .form-panel > .hint-text {
    position: absolute;
    left: 0;
    top: 45%;
    width: 100%;
    text-align: center;
    font-size: 20px;
    color: #aaa;
    z-index: 16;
}

.form-design .form-panel .a-form-box {
    height: 100%;
}

.form-design .form-panel .draggable-box {
    height: 100%;
    overflow: auto;
}

.form-design .form-panel .draggable-box .list-main {
    min-height: 100%;
    padding: 5px;
    position: relative;
    background: #fafafa;
}

.form-design .form-panel .draggable-box .list-main .moving {
    min-height: 35px;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0 !important;
    position: relative;
}

.form-design .form-panel .draggable-box .list-main .moving::before {
    content: "";
    height: 5px;
    width: 100%;
    background: #409EFF;
    position: absolute;
    top: 0;
    right: 0;
}

.form-design .form-panel .draggable-box .list-main .drag-move-box {
    position: relative;
    box-sizing: border-box;
    padding: 8px;
    overflow: hidden;
    transition: all 0.3s;
    min-height: 36px;
}

.form-design .form-panel .draggable-box .list-main .drag-move-box:hover {
    background: fade(#409EFF, 20%);
}

.form-design .form-panel .draggable-box .list-main .drag-move-box::before {
    content: "";
    height: 5px;
    width: 100%;
    background: #409EFF;
    position: absolute;
    top: 0;
    right: -100%;
    transition: all 0.3s;
}

.form-design .form-panel .draggable-box .list-main .drag-move-box.active {
    background: fade(#409EFF, 20%);
    outline-offset: 0;
}

.form-design .form-panel .draggable-box .list-main .drag-move-box.active::before {
    right: 0;
}

.form-design .form-panel .draggable-box .list-main .drag-move-box .form-item-box {
    position: relative;
    box-sizing: border-box;
    word-wrap: break-word;
}

.form-design .form-panel .draggable-box .list-main .drag-move-box .form-item-box::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 888;
}

.form-design .form-panel .draggable-box .list-main .drag-move-box .show-key-box {
    position: absolute;
    bottom: 2px;
    right: 5px;
    font-size: 14px;
    /* z-index: 999; */
    color: #409EFF;
}

.form-design .form-panel .draggable-box .list-main .drag-move-box > .copy,
.form-design .form-panel .draggable-box .list-main .drag-move-box > .delete {
    position: absolute;
    top: 0;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #fff;
    z-index: 989;
    transition: all 0.3s;
}

.form-design .form-panel .draggable-box .list-main .drag-move-box > .copy.unactivated,
.form-design .form-panel .draggable-box .list-main .drag-move-box > .delete.unactivated {
    opacity: 0 !important;
    pointer-events: none;
}

.form-design .form-panel .draggable-box .list-main .drag-move-box > .copy.active,
.form-design .form-panel .draggable-box .list-main .drag-move-box > .delete.active {
    opacity: 1 !important;
}

.form-design .form-panel .draggable-box .list-main .drag-move-box > .copy {
    border-radius: 0 0 0 8px;
    right: 30px;
    background: #409EFF;
}

.form-design .form-panel .draggable-box .list-main .drag-move-box > .delete {
    right: 0px;
    background: #409EFF;
}

/*.form-design .right-menu {*/
/*    width: 190px;*/
/*    background: #fff;*/
/*    border: 1px solid #ccc;*/
/*    position: fixed;*/
/*    transition: all 0s;*/
/*    box-shadow: 3px 3px 5px #999;*/
/*    padding: 8px 0;*/
/*    z-index: 999;*/
/*}*/

/*.form-design .right-menu ul {*/
/*    padding: 0;*/
/*    margin: 0;*/
/*    list-style: none;*/
/*}*/

/*.form-design .right-menu ul li {*/
/*    cursor: pointer;*/
/*    user-select: none;*/
/*    padding: 0 15px;*/
/*    height: 30px;*/
/*    line-height: 30px;*/
/*    font-size: 14px;*/
/*}*/

/*.form-design .right-menu ul li:hover {*/
/*    background: #eee;*/
/*}*/

/*.form-design .properties-content {*/
/*    height: 100%;*/
/*    overflow: hidden;*/
/*    background: #fff;*/
/*}*/

/*.form-design .properties-content .head-title {*/
/*    height: 50px;*/
/*    line-height: 50px;*/
/*    padding: 0 24px;*/
/*    font-size: 16px;*/
/*    border-bottom: 1px solid #ccc;*/
/*    color: rgba(0, 0, 0, 0.85);*/
/*}*/

.form-design .properties-content .properties-body {
    overflow: auto;
    height:calc(100vh - 342px);
    padding: 6px 12px;
}
.form-design .properties-content .properties-body::-webkit-scrollbar {
    width: 4px;
    background-color: #fff;
}

.form-design .properties-content .properties-body::-webkit-scrollbar-thumb {
    border-radius: 2px;
    -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, .3);
    background-color: #e8eaec;
}

.form-design .properties-content .properties-body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, .3);
    border-radius: 2px;
    background-color: #fff;
}

/*.form-design .properties-content .properties-body .ivu-form .ivu-form-item {*/
/*    margin-bottom: 0;*/
/*    padding: 5px 0;*/
/*}*/

/*.form-design .properties-content .properties-body .ivu-form .ivu-form-item .ivu-form-item__label, .form-design .properties-content .properties-body .ivu-form .ivu-form-item .el-radio__label, .form-design .properties-content .properties-body .ivu-form .ivu-form-item .el-switch__label, .form-design .properties-content .properties-body .ivu-form .ivu-form-item * {*/
/*    font-size: 13px;*/
/*}*/

/*.form-design .properties-content .properties-body .ivu-form .ivu-form-item .ivu-checkbox {*/
/*    font-size: 13px;*/
/*}*/

/*.form-design .properties-content .properties-body .ivu-form .ivu-form-item .ivu-checkbox .ivu-checkbox__label {*/
/*    font-size: 13px;*/
/*}*/

.form-design .batch-box > .batch-label {
    font-size: 16px;
    font-weight: 500;
    padding: 10px 10px;
}

.form-design .batch-box .draggable-box {
    min-height: 60px;
    width: 100%;
    border: 1px #ccc dashed;
    background: #fff;
}

.form-design .batch-box .draggable-box .list-main {
    min-height: 60px;
    position: relative;
    border: 1px #ccc dashed;
    overflow-x: auto;
    overflow-y: auto;
    white-space: nowrap;
}

.form-design .batch-box .draggable-box .list-main .moving {
    width: 175px;
    min-height: 94px;
    display: inline-block;
}

.form-design .batch-box .draggable-box .list-main > div {
    min-width: 185px;
    display: inline-block;
    vertical-align: top;
}


.form-design .batch-box,
.form-design .grid-box,
.form-design .table-box {
    position: relative;
    box-sizing: border-box;
    padding: 5px;
    background: fade(#9867f7, 12%);
    width: 100%;
    transition: all 0.3s;
    min-height: 30px;
    overflow: hidden;
}

.form-design .batch-box .form-item-box,
.form-design .grid-box .form-item-box,
.form-design .table-box .form-item-box {
    position: relative;
    box-sizing: border-box;
}

.form-design .batch-box .grid-row,
.form-design .batch-box .table-layout,
.form-design .grid-box .grid-row,
.form-design .grid-box .table-layout,
.form-design .table-box .grid-row,
.form-design .table-box .table-layout {
    background: fade(#9867f7, 12%);
}

.form-design .batch-box .grid-row .grid-col .draggable-box,
.form-design .batch-box .grid-row .table-td .draggable-box,
.form-design .batch-box .table-layout .grid-col .draggable-box,
.form-design .batch-box .table-layout .table-td .draggable-box,
.form-design .grid-box .grid-row .grid-col .draggable-box,
.form-design .grid-box .grid-row .table-td .draggable-box,
.form-design .grid-box .table-layout .grid-col .draggable-box,
.form-design .grid-box .table-layout .table-td .draggable-box,
.form-design .table-box .grid-row .grid-col .draggable-box,
.form-design .table-box .grid-row .table-td .draggable-box,
.form-design .table-box .table-layout .grid-col .draggable-box,
.form-design .table-box .table-layout .table-td .draggable-box {
    min-height: 60px;
    min-width: 50px;
    border: 1px #ccc dashed;
    background: #fff;
}

.form-design .batch-box .grid-row .grid-col .draggable-box .list-main,
.form-design .batch-box .grid-row .table-td .draggable-box .list-main,
.form-design .batch-box .table-layout .grid-col .draggable-box .list-main,
.form-design .batch-box .table-layout .table-td .draggable-box .list-main,
.form-design .grid-box .grid-row .grid-col .draggable-box .list-main,
.form-design .grid-box .grid-row .table-td .draggable-box .list-main,
.form-design .grid-box .table-layout .grid-col .draggable-box .list-main,
.form-design .grid-box .table-layout .table-td .draggable-box .list-main,
.form-design .table-box .grid-row .grid-col .draggable-box .list-main,
.form-design .table-box .grid-row .table-td .draggable-box .list-main,
.form-design .table-box .table-layout .grid-col .draggable-box .list-main,
.form-design .table-box .table-layout .table-td .draggable-box .list-main {
    min-height: 60px;
    position: relative;
    border: 1px #ccc dashed;
}

.form-design .batch-box::before,
.form-design .grid-box::before,
.form-design .table-box::before {
    content: "";
    height: 5px;
    width: 100%;
    background: transparent;
    position: absolute;
    top: 0;
    right: -100%;
    transition: all 0.3s;
}

.form-design .batch-box.active,
.form-design .grid-box.active,
.form-design .table-box.active {
    background: fade(#9867f7, 24%);
    outline-offset: 0;
}

.form-design .batch-box.active::before,
.form-design .grid-box.active::before,
.form-design .table-box.active::before {
    background: #9867f7;
    right: 0;
}

.form-design .batch-box > .copy,
.form-design .batch-box > .delete,
.form-design .grid-box > .copy,
.form-design .grid-box > .delete,
.form-design .table-box > .copy,
.form-design .table-box > .delete {
    position: absolute;
    top: 0px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #fff;
    z-index: 989;
    transition: all 0.3s;
}

.form-design .batch-box > .copy.unactivated,
.form-design .batch-box > .delete.unactivated,
.form-design .grid-box > .copy.unactivated,
.form-design .grid-box > .delete.unactivated,
.form-design .table-box > .copy.unactivated,
.form-design .table-box > .delete.unactivated {
    opacity: 0 !important;
    pointer-events: none;
}

.form-design .batch-box > .copy.active,
.form-design .batch-box > .delete.active,
.form-design .grid-box > .copy.active,
.form-design .grid-box > .delete.active,
.form-design .table-box > .copy.active,
.form-design .table-box > .delete.active {
    opacity: 1 !important;
}

.form-design .batch-box > .copy,
.form-design .grid-box > .copy,
.form-design .table-box > .copy {
    border-radius: 0 0 0 8px;
    right: 30px;
    background: #9867f7;
}

.form-design .batch-box > .delete,
.form-design .grid-box > .delete,
.form-design .table-box > .delete {
    right: 0px;
    background: #9867f7;
}

.form-design .el-dialog__header {
    padding: 10px 20px 10px;
    background: #a9c8ea;
}

.form-design .el-dialog__header .el-dialog__title {
    line-height: 20px;
    font-size: 16px;
}

.form-design .el-dialog__header button {
    top: 10px;
}

.form-design .form-table-index {
    display: inline;
}

.form-design .form-table {
    width: 100%;
    box-sizing: border-box;
    transition: all 0.3s;
    border-collapse: collapse;
}

.form-design .form-table tr {
    transition: all 0.3s;
    border-collapse: collapse;
}

.form-design .form-table tr .ivu-form-item {
    margin-bottom: 0 !important;
}

.form-design .form-table tr td {
    box-sizing: border-box;
    transition: all 0.3s;
    padding: 3px 3px;
    border-collapse: collapse;
    display: table-cell;
    vertical-align: inherit;
}

.form-design .form-table tr td .cell {
    padding-right: 2px;
    padding-left: 2px;
}

.form-design .form-table tr td .ivu-form-item {
    margin-bottom: 0 !important;
}

.form-design .form-table.bordered tr td {
    border: 1px solid #e8e8e8 !important;
}

.form-design .form-table.bright tr:hover > td {
    background: #e6f7ff;
}

.form-design .form-table.small tr td {
    /*padding: 8px 8px;*/
}

.form-design .form-table .el-row .ivu-form-item {
    margin: 0 !important;
}

.form-design .option-change-container {
    width: calc(100% - 8px);
}

.form-design .option-change-container .el-tree-node__content {
    height: 35px;
}

.form-design .option-change-container .el-tree-node__content .custom-tree-node {
    height: 35px;
}

.form-design .base-item .slider-box {
    display: flex;
}

.form-design .base-item .base-item-span {
    white-space: pre-wrap;
}

.form-design .base-item .slider-box > .slider {
    flex: 1;
    margin-right: 16px;
}

.form-design .base-item .slider-box > .number {
    width: 70px;
}

.form-design .base-item .el-input-number-diaplay {
    vertical-align: middle;
    display: inline-flex;
    position: relative;
}

.form-design .base-item .el-input-number-diaplay .el-input-number__append {
    float: left;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    background-color: #F5F7FA;
    color: #909399;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    white-space: nowrap;
    border-left: 0;
    border-right: 0;
}

.form-design .base-item .el-input-number-diaplay .el-input-number__append .el-input__inner {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.form-design .base-item .el-input-number-diaplay .el-input-number-group__append {
    border-left: 0;
    text-align: center;
    display: inline-table;
}

.form-design .option-change-container .option-change-box {
    height: 38px;
    padding-bottom: 6px;

}

.form-design .option-change-container .option-change-box .option-delete-box {
    margin-top: 3px;
    background: #ffe9e9;
    color: #f22;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 50%;
    overflow: hidden;
    transition: all 0.3s;

}

.form-design .option-change-container .option-change-box .option-delete-box:hover {
    background: #f22;
    color: #fff;
}


.form-design .divider-center .is-center {
    font-size: 13px;
    left: 40%;
    transform: translateX(-40%) translateY(-50%);
}

.form-design .control-form {

    min-height: 80px;
}

.form-design .form-table-bordered {

    border: 1px solid #ccc;
}

.form-design .json-box .el-textarea__inner {
    height: 300px;
}

.design-preview .item-main {

    height: calc(100vh - 140px);
    padding: 0 20px 0 20px;
    overflow: auto;

}

.form-design .ng-icon svg {
    width: 16px;
    height: 16px;
    line-height: 35px;
}

.form-design .ng-icon {
    width: 20px;
    height: 20px;
    padding-left: 5px;
    line-height: 35px;
}


.form-render-preview {
    height: 600px;
}

.form-render-preview .el-tab-pane {
    height: 500px;
    overflow: auto;
}

.form-design .form-item {
    height: 100%;
}

.form-design .width-select {
    max-width: 200px;
}

.form-design {
    height: 100%;
    width: 100%;
}

.form-properties {
    height: 100%;
    width: 100%;
}

.height-all {
    height: 100%;
}
